<template>
  <div class="home">
    <apiCard>
      <template #label>apiCard 组件</template>
      <template #demo>
        <apiCard></apiCard>
      </template>
      <template #api>
        <apiProps :element="modelList.apiCard"></apiProps>
      </template>
    </apiCard>

    <apiCard>
      <template #label>apiProps 组件</template>
      <template #demo>
        <Card>
          <apiProps></apiProps>
        </Card>
      </template>
      <template #api>
        <apiProps :element="modelList.apiProps"></apiProps>
      </template>
    </apiCard>

    <apiCard>
      <template #label>排序标签 组件</template>
      <template #demo>
        <Card>
        <span>model值 :</span>
        <span>{{sorts}}</span>
        <sortGroup v-model="sorts" @change="groupChange">
          <sortTag :value="inputDate" @on-change="sortChange">时间</sortTag>
          <sortTag :value="price" @on-change="sortChange">价格</sortTag>
          <sortTag :value="unit" @on-change="sortChange">单价</sortTag>
        </sortGroup>
        </Card>
      </template>
      <template #api>
        <apiProps :element="modelList.sortGroup"></apiProps>
        <apiProps :element="modelList.sortTag"></apiProps>
      </template>
    </apiCard>

    <apiCard>
      <template #label>多选 组件</template>
      <template #demo>
        <Card>
          <span>model值 :</span>
          <span>{{checkList}}</span>
          <boxs :src="{'0':'甲','1':'乙','2':'丙'}" v-model="checkList">合同方：</boxs>
        </Card>
      </template>
      <template #api>
        <apiProps :element="modelList.boxs"></apiProps>
      </template>
    </apiCard>
    <gj/>
  </div>
</template>

<script>
import apiProps from "##/api/props";

import apiCard from "@@/card/apiCard";

import sortTag from "@@/sort/sortTag";
import sortGroup from "@@/sort/sortGroup";
import boxs from "@@/check/box";
import gj from "@@/gj";

export default {
  name: "componentList",
  components: {
    apiProps,
    apiCard,
    sortTag,
    sortGroup,
    boxs,
    gj
  },
  data() {
    return {
      modelList: {
        sortTag,
        sortGroup,
        boxs,
        apiCard,
        apiProps
      },
      sorts: [],
      checkList: []
    };
  },
  methods: {
    sortChange(d) {
      console.log("sortChange", d);
    },
    groupChange(d) {
      console.log("groupChange", d);
    }
  }
};
</script>

<style lang="less" >
  .home {
      margin: 10px 100px;
      > div {
          margin: 10px;
      }
      .ivu-card {
          .ivu-card {
          width: 600px;
          margin: auto;
          }
      }
  }
</style>

